﻿<!DOCTYPE html>
<!--
    quirli, replay with ease.
    Copyright (C) 2014 by marcel suter, marcel@codeministry.ch

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html ng-app="quirli" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="en" />
    <meta name="Copyright" content="GPLv3 licensed by codeministry.ch" />
    <meta name="dc.language" content="en" />
    <meta name="geo.country" content="CH" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Media player for replay and rehearsal with cues.">
    <meta name="author" content="codeministry.ch">
    <link rel="shortcut icon" href="img/favicon.ico">

    <title>quirli - replay and share media with cues</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">    
    <!-- Bootstrap theme -->
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">    
    <!-- use a customized bootstrap version for quirli, postpending the Bootstrap core CSS.-->
    <link href="bootstrap/css/quirli-mods.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="bootstrap/css/navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
        
    <!-- Loading from own server to avoid dependency on other resources. This also simplifies offline usage-->
    <script src="jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="angularjs/1.0.5/angular.min.js"></script>

    <!-- Mediaelement by John Dyer 	-->    
    <!-- Already specified copy of JQuery is used instead of the mediaelement one.-->
	<script src="mediaelement/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="mediaelement/mediaelementplayer.min.css" />

	<!-- Load the track angular controller.-->
	 <script src="js/playercontroller.js"></script>

    <!-- Load the playlist angular controller.-->
	 <script src="js/playlistcontroller.js"></script>
    
    <!-- Load the keyboard angular controller.
	 <script src="js/keyboardcontroller.js"></script>-->
    
    <!-- Load the presenter code for this view -->
    <script src="js/playerpresenter.js"></script> 
    
    <!-- The JSONP loader library (by www.nonobtrusive.com)-->
    <script src="lightweightjsonp/jsonp.js"></script>   
</head>	
<body role="document">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">quirli
                    <img src="img/quirli_app_icon_16x16.png" />
                    <small><em>replay with ease.</em></small>&nbsp;<span class="label label-danger">Beta</span></a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
	          <li class="divider-vertical"></li>
	          <li><a onclick="setViewStyle('edit')">Edit</a></li>
	          <li><a onclick="setViewStyle('play')">Play</a></li>
	          <li class="divider-vertical"></li>
	          <li><a href="playlist.html">Playlist</a></li>
			  <!-- Menu-Playlist (Experimental). This is not actively used because a separate playlist page seems simpler and cleaner
	          <li class="dropdown">
	              <a href="#" id="dropplaylist" role="button" class="dropdown-toggle" data-toggle="dropdown">Menu-Playlist<small>(Experimental)</small></a>
	              <ul class="dropdown-menu" role="menu" aria-labelledby="dropplaylist" ng-controller="playlistcontroller">
	                  <li ng-repeat="track in tracks"><a tabindex="-1" href="#" ng-click="loadTrack(track.url)"><i class="icon-play-circle icon-white" rel="tooltip" title="Loads the track into the player."></i>&nbsp;{{track.title}}</a></li>
	             </ul>
	          </li>-->
          </ul>
          <ul class="nav navbar-nav navbar-right">
          	<!--nothing to show here right now -->
           </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>    
	<div class="container" ng-controller="playerController">
	        <!--Error notification-->
		    <div id="errordisplay">
			    <div class="alert alert-warning">
			    <h4 id="errortext">Please enable JavaScript to use quirli.</h4>
			    </div>
		    </div>
		    <div id="progressdisplay">
			    <div class="alert alert-info">
			    <h4>Loading...</h4>
			    </div>
		    </div>
            <strong>{{TrackTitle}}</strong><span ng-show="(ArtistName.length)"> by </span><!--Show only when there is an artist mentioned--><strong>{{ArtistName}}</strong><span ng-show="(AlbumName.length)"> on </span><!--Show only when there is an album mentioned--><strong>{{AlbumName}}</strong>
 		    <div> <!-- The core UI -->
				<div id="mediainput">
					<p ng-show="ViewStyle == 'edit'" class="form-group">
						<label class="sr-only" for="sourceurl">URL to media</label>
			    		<input ng-model="MediaUrl" class="form-control" type="text" id="sourceurl" onblur="loadUrl('{{MediaUrl}}')" autocomplete="on" placeholder="Enter URL to media file or YouTube video" name="sourceurl"/> 
                	</p><!--form-group-->
                    <p ng-show="ViewStyle == 'edit' && (PlaybackType.length)" class="form-group">
						<label class="sr-only" for="TrackTitle">Track title</label>
	                    <input ng-model="TrackTitle" class="form-control" type="text" id="TrackTitle" autocomplete="on" placeholder="Track title" name="TrackTitle"/>
						<label class="sr-only" for="ArtistName">Artist name</label>
	                    <input ng-model="ArtistName" class="form-control" type="text" id="ArtistName" autocomplete="on" placeholder="Name of the artist" name="ArtistName"/>
						<label class="sr-only" for="AlbumName">Album name</label>
	                    <input ng-model="AlbumName" class="form-control" type="text" id="AlbumName" autocomplete="on" placeholder="Name of the album" name="AlbumName"/>
					</p>
		    	</div>

		    	<!--experimental
                 <p ng-show="(Debug.lenght)">
                 <span class="badge-important">Debug info</span>
                 Full url: {{location.absUrl()}}
			     </p>-->

                <!--experimental
                <div id="keyboardecho">
                <canvas id="example" width="200" height="200">
                This text is displayed if your browser does not support HTML5 Canvas.
                </canvas>
				</div>-->
                <!--experimental-->

 
				<div id="mediaplayer"><!-- Media player -->		
					<p><span ng-show="ViewStyle == 'edit' && (PlaybackType.length)" class="badge">playback method: {{PlaybackType}}</span></p>
                    <div id="quirliplayer"></div>
					<div id="playercontrols" ng-show="ViewStyle == 'edit' && (PlaybackType.length)">
    					//TODO continue here with Bootstrap application, with getting the buttons right
						<form ng-submit="addCueX()">
                        <button class="btn btn-default" value="Play"        onclick="doPlay()" data-toggle="tooltip" data-placement="top" title="Starts playing from the current position.">
                        	<span class="glyphicon glyphicon-play"></span>
                        </button> 
                        <button class="btn btn-default" value="Pause"        onclick="doPause()" data-toggle="tooltip" data-placement="top" title="Pauses playing at the current position.">
                        	<span class="glyphicon glyphicon-pause"></span>
                        </button> 
                        <button class="btn btn-default" value="Volume down" onclick="doDecreaseVolume()" data-toggle="tooltip" data-placement="top" title="Decreases the volume of the player.">
                        	<span class="glyphicon glyphicon-volume-down"></span>
                        </button> 
                        <button class="btn btn-default" value="Volume up" onclick="doIncreaseVolume()" data-toggle="tooltip" data-placement="top" title="Increases the volume of the player.">
                        	<span class="glyphicon glyphicon-volume-up"></span>
                        </button> 
                        <button class="btn btn-default" value="Take cue here!" onclick="doAddCueHere()" data-toggle="tooltip" data-placement="top" title="Takes a cue at the current position.">
                        	<span class="glyphicon glyphicon-star"></span>Take cue here!
                        </button>
                        	<span class="glyphicon glyphicon-info-sign" rel="tooltip" title="Review the media in the player using the button controls. At the desired positions press [Take cue here!] to create a cue point"></span>
 
                        <!--
						<input type="button" class="btn btn-inverse" value="Load"		onclick="loadCues()" /> 
						<input type="button" class="btn btn-inverse" value="Save" 		onclick="saveCues()" />
						 -->
						</form>
					</div>
				</div>
				
				<div><!-- Cues -->
                    <p> <!--paragraph for better visual separation to player-->
					<!-- I use a div. A form would cause a postback and thus reload of the empty page (equals to unload the media and remove all cues) -->
					<div ng-show="ViewStyle == 'edit'" id="cuedisplayedit"> <!-- cues edit view -->
						//TODO make the grid a little nicer
						//make horizontal gaps smaller, probably zero
						//Try a better flowing layout when making screen smaller
						//Time input should be kept narrow
						<div class="row" ng-repeat="cue in cues">
						  <div class="col-lg-6">
						    <div class="input-group">
						      <span class="input-group-btn">
						        <button class="btn btn-primary" type="button" ng-click="playFromPosition(cue.position)">
						        	<span class="glyphicon glyphicon-play"></span>
						        </button>
						      </span>
						      <input type="text" class="form-control" ng-model="cues[$index].text" focus="{{cue.isNewest}}">
						    </div><!-- /input-group -->
						  </div><!-- /.col-lg-6 -->
						  <div class="col-lg-2">
						      <input type="text" class="form-control" ng-model="cues[$index].position" size="6" maxlength="6">
						  </div><!-- /.col-lg-2 -->
						  <div class="col-lg-4">
		                      <!-- immediately recycle trashed cues. This has been recognised more intuitive than first ticking a checkbox and then archiving, by a user-->
		                      <button class="btn btn-default" type="button" ng-click="recycle(cue)">                      
								  <span class="glyphicon glyphicon-trash"></span>
							  </button> 
						  </div><!-- /.col-lg-4 -->
						</div><!-- /.row -->						
						<ul class="unstyled">
							<li ng-repeat="cue in cues">
                                <div class="form-horizontal">
                                    <button class="btn btn-success" ng-click="playFromPosition(cue.position)">                      
										<i class="icon-play icon-white" rel="tooltip" title="Skips the media position to this cue."></i>
									</button> 
									<input type="text" ng-model="cues[$index].text" class="input-xlarge" focus="{{cue.isNewest}}" /> 
									<input type="text" ng-model="cues[$index].position" size="6" maxlength="6" class="input-mini" />
                                    <!-- immediately recycle trashed cues. This has been recognised more intuitive than first ticking a checkbox and then archiving, by a user-->
                                    <button class="btn btn-mini" ng-click="recycle(cue)">                      
										<i class="icon-trash" rel="tooltip" title="Removes this cue."></i>
									</button> 
   
                                    <!-- recycling with an archive, as alternative. Not used for now                           
          							The label "for" identifier and the input "id" identifier must be unique among other items and equal to each other                                    
                                    <span class="badge" id="trashcan"><i class="icon-trash" rel="tooltip" title="Removes this cue." ng-model="cue.recycle"></i></span>
									<label for="checkbox{{cue.position}}"><i
										class="icon-trash" rel="tooltip" title="Removes this cue."></i></label>
									<input type="checkbox" id="checkbox1" name="checkbox{{cue.position}}" ng-model="cue.recycle" />-->  
							    </div>
							</li>
						</ul>
                        <!-- Not used, as we do not recycle at the moment, but immediately trash
						<form ng-submit="addCue()">
							<span>{{remaining()}} of {{cues.length}} used</span> [ <a href="" ng-click="archive()">recycle checked</a> ]
						</form>-->
					</div>
					<div ng-show="ViewStyle == 'play'" id="cuedisplayplay"> <!-- cues view for playing, simple style -->
                        <div class="quirliactionbuttons" >
							<span ng-repeat="cue in cues"><button class="btn btn-success" ng-click="playFromPosition(cue.position)" rel="tooltip" title="Skips the media position to this cue."><span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;<!-- spaces for nicer display -->{{cue.text}}&nbsp;</button>&nbsp;</span>
                        </div>
					</div>
                    </p>
				</div>		
				
				<div ng-show="ViewStyle == 'edit' && PlaybackType.length" id="persistenceoptions"> <!-- Persistence -->
                    <p>
			    	<a class="btn btn-inverse" data-toggle="modal" href="#modalSaveAsLink" onclick="SaveAsLink();">Share as link...</a>
					<i class="icon-question-sign" rel="tooltip" title="Provides the track, consisting of media url and cues, as a reusable link."></i>
                    </p>
		    	</div>		    	
		    	
		    	<div class="modal hide" id="modalSaveAsLink"><!-- Save as link, modal variant-->
				    <div class="modal-header">
					    <button type="button" class="close" data-dismiss="modal">x</button>
					    <h3>Share as link</h3>
					</div>
					<div class="modal-body">
						<p>Copy the link below to keep this track for later use.</p>
						<p>
						<input class="input-xxlarge" type="text" id="savelinkInBox" />
						</p>
						<p>Or click on the link below to reload with this track (to bookmark it for example)</p>
						<p>
						<a href="" id="savelinkToLoad">This track with cues.</a>
						</p>	
                   		<div class="alert alert-error">
                               Legal notice: By using or sharing the provided link you declare that you are entitled to do so. The author of quirli denies all responsibility in any eventual copyright infringement by you.
                		</div>					
					</div>
					<div class="modal-footer">
					    <a href="#" class="btn btn-inverse" data-dismiss="modal">Close</a>
				    </div>
			    </div>
			</div>
			<div class="alert alert-info">
				Please give feedback to <a href="mailto:hello@quir.li">hello@quir.li</a>
				<ul>
				<li>Only working on latest browsers that support <a href="http://en.wikipedia.org/wiki/HTML5">HTML5</a>.</li>
				<li>The used mediaplayer, <a href="http://mediaelementjs.com/">mediaelement.js</a> supports the various media types as stated on it's website.</li>
				</ul>
			</div>
 	</div> <!-- /container -->
 	  
    <!-- Footer (repeated on every page intentionally, as iframes with the seamless attribute are not yet universally supported)
        ================================================== -->
    <div id="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Created by <a href="http://www.codeministry.ch">codeministry.ch</a>. Hosted by <a href="http://www.cyon.ch">cyon.ch</a>.
        <br/>	
        Licensed under the open source <a href="gpl-3.0.txt">GPLv3 License</a>
			<span class="muted">&nbsp;&middot;&nbsp;</span>
			<a href="http://quirli.codeplex.com">Source</a>
			<span class="muted">&nbsp;&middot;&nbsp;</span>
			<a href="disclaimer.txt">Disclaimer</a>
		</p>
      </div>
    </div> <!-- /footer -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="jquery/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
